
<template>
  <view class="components-home">
    
    <view style="margin-top:-50rpx;height: 486rpx;z-index: -1;">
      <image src='https://z3.ax1x.com/2021/07/06/RoKd0g.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image>
    </view>
    
<!-- cat -->
    <view class="all-wrap" style="margin-top: -480rpx;">
      <view class="all">
        <view class="yarn"></view>
        <view class="cat-wrap">
          <view class="cat">
            <view class="cat-upper">
              <view class="cat-leg"></view>
              <view class="cat-leg"></view>
              <view class="cat-head">
                <view class="cat-ears">
                  <view class="cat-ear"></view>
                  <view class="cat-ear"></view>
                </view>
                <view class="cat-face">
                  <view class="cat-eyes"></view>
                  <view class="cat-mouth"></view>
                  <view class="cat-whiskers"></view>
                </view>
              </view>
            </view>
            <view class="cat-lower-wrap">
              <view class="cat-lower">
                <view class="cat-leg">
                  <view class="cat-leg">
                    <view class="cat-leg">
                      <view class="cat-leg">
                        <view class="cat-leg">
                          <view class="cat-leg">
                            <view class="cat-leg">
                              <view class="cat-leg">
                                <view class="cat-leg">
                                  <view class="cat-leg">
                                    <view class="cat-leg">
                                      <view class="cat-leg">
                                        <view class="cat-leg">
                                          <view class="cat-leg">
                                            <view class="cat-leg">
                                              <view class="cat-leg">
                                                <view class="cat-paw"></view>
                                              </view>
                                            </view>
                                          </view>
                                        </view>
                                      </view>
                                    </view>
                                  </view>
                                </view>
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="cat-leg">
                  <view class="cat-leg">
                    <view class="cat-leg">
                      <view class="cat-leg">
                        <view class="cat-leg">
                          <view class="cat-leg">
                            <view class="cat-leg">
                              <view class="cat-leg">
                                <view class="cat-leg">
                                  <view class="cat-leg">
                                    <view class="cat-leg">
                                      <view class="cat-leg">
                                        <view class="cat-leg">
                                          <view class="cat-leg">
                                            <view class="cat-leg">
                                              <view class="cat-leg">
                                                <view class="cat-paw"></view>
                                              </view>
                                            </view>
                                          </view>
                                        </view>
                                      </view>
                                    </view>
                                  </view>
                                </view>
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="cat-tail">
                  <view class="cat-tail">
                    <view class="cat-tail">
                      <view class="cat-tail">
                        <view class="cat-tail">
                          <view class="cat-tail">
                            <view class="cat-tail">
                              <view class="cat-tail">
                                <view class="cat-tail">
                                  <view class="cat-tail">
                                    <view class="cat-tail">
                                      <view class="cat-tail">
                                        <view class="cat-tail">
                                          <view class="cat-tail">
                                            <view class="cat-tail">
                                              <view class="cat-tail -end"></view>
                                            </view>
                                          </view>
                                        </view>
                                      </view>
                                    </view>
                                  </view>
                                </view>
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    

    <!-- <view class="title-header radius shadow-warp bg-white" style="">
      <view class="title-text">
        酷 / 炫 / 组 / 件
      </view>
    </view>  -->
    
    <!-- <view class="title-header">
      <view class="title-text">
        酷 / 炫 / 组 / 件
      </view>
    </view> -->
    
    <!-- <view class="cu-list menu card-menu shadow bg-white">
      <view class="cu-item ">
        <view class='content'>
          <text class='icon-tagfill text-red'></text>
          <text class='text-black text-bold text-title text-xxl'>酷 / 炫 / 组 / 件</text>
        </view>
        <view class='action'>
          <view class="cu-tag round bg-orange light">酷炫</view>
          <view class="cu-tag round bg-olive light">好玩</view>
          <view class="cu-tag round bg-blue light">渐变</view>
        </view>
      </view>
    </view> -->
    
    <view class="cu-card margin-top-lg">
      <view class="cu-item bg-img shadow-blur" style="background-image:url(https://cdn.nlark.com/yuque/0/2021/jpeg/280373/1617805351729-assets/web-upload/256193a8-2e78-4268-a1dd-ed13e6d2f2d0.jpeg)">
        <view class="cardTitle">
          酷 / 炫 / 组 / 件
        </view>
      </view>
    </view>
    
    <view class='nav-list margin-top-xl'>
      <!-- #ifdef H5 -->
      <navigator open-type="navigate" hover-class='none' :url="'/tn_components/' + item.title" :class="'nav-li shadow-blur bg-kuxuan' + (index+1)"
        v-for="(item, index) in kuxuan" :key="'kuxuan' + index">
        <view class="nav-link">{{item.name}}</view>
        <view class="cu-avatar xl round">
          <view :class="'cuIcon-'+item.icon"></view>
        </view>
      </navigator>
      <!-- #endif -->
      <!-- #ifndef H5 -->
      <navigator open-type="navigate" hover-class='none' :url="'/tn_components/' + item.title" :class="'nav-li shadow-blur bg-kuxuan' + (index+1)"
        v-for="(item, index) in kuxuan" :key="index">
        <view class="nav-link">{{item.name}}</view>
        <view class="cu-avatar xl round">
          <view :class="'cuIcon-'+item.icon"></view>
        </view>
      </navigator>
      <navigator target="miniProgram" app-id='wx331e277fcb8f4df3' path='__plugin__/wx2b03c6e691cd7370/pages/live-player-plugin?room_id=2'
        version='release' delta="1" hover-class="none" class="nav-li shadow-blur bg-kuxuan4">
        <view class="nav-link">直播间</view>
        <view class="cu-avatar xl round">
          <view class="cuIcon-video"></view>
        </view>
      </navigator>
      <!-- #endif -->
    </view>
    
    <view class="cu-card margin-top-lg">
      <view class="cu-item bg-img shadow-blur" style="background-image:url(https://cdn.nlark.com/yuque/0/2021/jpeg/280373/1617805351729-assets/web-upload/256193a8-2e78-4268-a1dd-ed13e6d2f2d0.jpeg)">
        <view class="cardTitle">
          界 / 面 / 组 / 件
        </view>
      </view>
    </view>

    <view class='nav-list margin-top'>
      <!-- #ifdef H5 -->
      <navigator open-type="navigate" hover-class='none' :url="'/tn_components/' + item.title" :class="'nav-li bg-kuxuan' + (index+1)"
        v-for="(item, index) in yangshi" :key="'yangshi' + index">
        <view class="nav-link">{{item.name}}</view>
        <view class="cu-avatar xl round">
          <view :class="'cuIcon-'+item.icon"></view>
        </view>
      </navigator>
      <!-- #endif -->
      <!-- #ifndef H5 -->
      <navigator open-type="navigate" hover-class='none' :url="'/tn_components/' + item.title" :class="'nav-li bg-kuxuan' + (index+1)"
        v-for="(item, index) in yangshi" :key="index">
        <view class="nav-link">{{item.name}}</view>
        <view class="cu-avatar xl round">
          <view :class="'cuIcon-'+item.icon"></view>
        </view>
      </navigator>
      <!-- #endif -->
    </view>


    <view class="cu-card margin-top-lg">
      <view class="cu-item bg-img shadow-blur" style="background-image:url(https://cdn.nlark.com/yuque/0/2021/jpeg/280373/1617805351729-assets/web-upload/256193a8-2e78-4268-a1dd-ed13e6d2f2d0.jpeg)">
        <view class="cardTitle">
          友 / 情 / 链 / 接
        </view>
      </view>
    </view>
    
    <view class='nav-list margin-top'>
      <!-- #ifdef H5 -->
      <navigator target="miniProgram" :app-id="item.appid" :path="item.path" version="release" delta="1" hover-class="none" :class="'nav-li bg-kuxuan' + (index+1)"
        v-for="(item, index) in link" :key="'youqing' + index">
        <view class="nav-link">{{item.name}}</view>
        <view class="cu-avatar xl round">
          <view :class="'cuIcon-'+item.icon"></view>
        </view>
      </navigator>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <navigator target="miniProgram" :app-id="item.appid" :path="item.path" version="release" delta="1" hover-class="none" :class="'nav-li bg-kuxuan' + (index+1)"
        v-for="(item, index) in link" :key="index">
        <view class="nav-link">{{item.name}}</view>
        <view class="cu-avatar xl round">
          <view :class="'cuIcon-'+item.icon"></view>
        </view>
      </navigator>
      <!-- #endif -->
    </view>

  </view>
</template>

<script>
  export default {
    name: 'Components',
    data() {
      return {
        kuxuan: [{
            title: 'gamecube',
            name: '魔方游戏',
            text: '一个魔方小游戏',
            icon:'circle',
            color: ''
          },
          {
            title: 'pano',
            name: '全景图-VR',
            icon:'global',
            color: ''
          },
          {
            title: 'star',
            name: '粒子-JS',
            icon:'light',
            color: ''
          }
        ],

        yangshi: [{
            title: 'mimicry',
            name: '新拟态',
            icon:'circle',
            color: ''
          }, {
            title: 'theme',
            name: '主题切换',
            icon:'circle',
            color: ''
          },
          {
            title: 'bggrad',
            name: '渐变动画',
            icon:'circle',
            color: ''
          },
          {
            title: 'bgcolor',
            name: '纯色过渡',
            icon:'circle',
            color: ''
          },
          {
            title: 'ancube',
            name: '立方体',
            icon:'circle',
            color: ''
          },
          {
            title: 'anloading',
            name: '加载动画',
            icon:'circle',
            color: ''
          }
        ],
        
        link: [{
          appid: 'wx2ac2313767a99df9',
          name: '穗康码',
          icon:'circle',
          path: '/pages/stat/index'
        }, 
        {
          appid: 'wx7c69ce7f11709260',
          name: '简历王者',
          icon:'circle',
          path: '/pages/index/index'
        },
        {
          appid: 'wx30e019b9648377bf',
          name: '七七拼团',
          icon:'circle',
          path: 'pages/index/index'
        },
        {
          appid: 'wx7de7a77441d5266c',
          name: '你的小确幸',
          icon:'circle',
          path: 'pages/index/index'
        }]
      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  /* 标题1 */
  .shadow-warp {
  	position: relative;
  	box-shadow: 0 8rpx 10rpx rgba(0, 0, 0, 0.08);
  }
  
  .shadow-warp:before,
  .shadow-warp:after {
  	position: absolute;
  	content: "";
  	top: 20rpx;
  	bottom: 30rpx;
  	left: 20rpx;
  	width: 50%;
  	box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
  	transform: rotate(-3deg);
  	z-index: -1;
  }
  
  .shadow-warp:after {
  	right: 20rpx;
  	left: auto;
  	transform: rotate(3deg);
  }
  
  /* 标题2 */
  .cu-bar .content image{
    height: 60rpx;
    width: 240rpx;
  }
  
  .cardTitle{
    color: #fff;
    padding: 20rpx 32rpx;
    font-size: 44rpx;
    font-weight: bold;
    transform: skew(-5deg, 0deg);
    position: relative;
    text-shadow: 0px 0px 6rpx rgba(0,0,0,0.3)
  }
  
  .cardTitle::before{
    content: "";
    position: absolute;
    width: 60rpx;
    height: 6rpx;
    border-radius: 20rpx;
    background-color: rgba(255,255,255,0.02);
    display: block;
    top: 178rpx;
    left: 42rpx;  
    transform: skew(10deg, 0deg);
  }
  .cardTitle::after{
    content: "";
    position: absolute;
    width: 280rpx;
    border-radius: 6rpx;
    height: 24rpx;
    background-color: #fff;
    display: block;
    bottom: 10rpx;
    left: 40rpx;  
    transform: skew(10deg, 0deg);
    opacity: 0.02;
  }
  
  /* 内容 */
  .nav-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 12upx 0px;
    justify-content: space-between;
  }
  
  .nav-li {
    padding: 120upx 30upx 40upx 30upx;
    border-radius: 12upx;
    width: 100%;
    margin: 0 18upx 40upx;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 99;
  }
  
  .nav-li::after {
    content: "";
    /* position: absolute; */
    z-index: -1;
    /* background-image: url(https://cdn.nlark.com/yuque/0/2021/png/280373/1617612728145-assets/web-upload/80ac2ed6-e263-424b-8225-a362fcf68f15.png); */
    background-image: inherit;
    width: 100%;
    height: 8%;
    left: 0;
    bottom: -5%;
    border-radius: 10upx;
    opacity: 1;
    transform: scale(1, 1);
    background-size: 100% 100%;
  }
  
  .nav-li .cu-avatar{
    position: absolute;
    right: 50upx;
    top: 62upx;
    font-size: 85upx;
    width: 132upx;
    height: 132upx;
    text-align: center;
    line-height: 132upx;
    opacity: 0.9;
    background-color: rgba(0,0,0,0.05);
  }
  
  
  .bg-kuxuan1::after {
    content: "";
    /* position: absolute; */
    z-index: -1;
    background-image: url(https://cdn.nlark.com/yuque/0/2021/png/280373/1617612728145-assets/web-upload/80ac2ed6-e263-424b-8225-a362fcf68f15.png);
    /* background-image: inherit; */
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: 10upx;
    opacity: 1;
    transform: scale(1, 1);
    /* z-index: -999; */
  }
  
  .bg-kuxuan2::after {
    content: "";
    /* position: absolute; */
    z-index: -1;
    background-image: url(https://cdn.nlark.com/yuque/0/2021/png/280373/1617634085817-assets/web-upload/d7399133-6cdf-45e9-be38-55fdc55d2fc5.png);
    /* background-image: inherit; */
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: 10upx;
    opacity: 1;
    transform: scale(1, 1);
    /* z-index: -999; */
  }
  .bg-kuxuan3::after {
    content: "";
    /* position: absolute; */
    z-index: -1;
    background-image: url(https://cdn.nlark.com/yuque/0/2021/png/280373/1617626408926-assets/web-upload/76498c77-440e-42ec-a297-8a352883c6d2.png);
    /* background-image: inherit; */
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: 10upx;
    opacity: 1;
    transform: scale(1, 1);
    /* z-index: -999; */
  }
  
  .bg-kuxuan4::after {
    content: "";
    /* position: absolute; */
    z-index: -1;
    background-image: url(https://cdn.nlark.com/yuque/0/2021/png/280373/1617634223105-assets/web-upload/c8a4d382-8eb1-4822-a322-985420821804.png);
    /* background-image: inherit; */
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0%;
    border-radius: 10upx;
    opacity: 1;
    transform: scale(1, 1);
    /* z-index: -999; */
  }
  
  .bg-kuxuan5::after {
    content: "";
    /* position: absolute; */
    z-index: -1;
    background-image: url(https://cdn.nlark.com/yuque/0/2021/png/280373/1617634435231-assets/web-upload/dda724ec-0e0f-498c-a104-7a19cfe7e7bc.png);
    /* background-image: inherit; */
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0%;
    border-radius: 10upx;
    opacity: 1;
    transform: scale(1, 1);
    /* z-index: -999; */
  }
  
  .bg-kuxuan6::after {
    content: "";
    /* position: absolute; */
    z-index: -1;
    background-image: url(https://cdn.nlark.com/yuque/0/2021/png/280373/1617634435242-assets/web-upload/758688f7-4a48-4eea-87e3-fc79da57057b.png);
    /* background-image: inherit; */
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0%;
    border-radius: 10upx;
    opacity: 1;
    transform: scale(1, 1);
    /* z-index: -999; */
  }
  
  .nav-li.cur {
    color: #fff;
    background: rgb(94, 185, 94);
    box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
  }
  
  .nav-title {
    font-size: 36upx;
    font-weight: 300;
    color: #fff;
  }
  
  .nav-title::first-letter {
    font-size: 42upx;
    margin-right: 4upx;
  }
  
  .nav-link {
    font-size: 42upx;
    text-transform: Capitalize;
    padding: 10upx 0 18upx 0;
    position: relative;
  }
  
  .nav-link::before {
    content: "";
    position: absolute;
    display: block;
    width: 50upx;
    height: 6upx;
    background: #fff;
    bottom: 0;
    left: 0;
    opacity: 0.2;
  }
  
  .nav-link::after {
    content: "";
    position: absolute;
    display: block;
    width: 72%;
    height: 1px;
    background: #fff;
    bottom: 0;
    left: 0upx;
    opacity: 0.08;
  }
  
  .nav-link::first-letter {
    font-weight: 600;
    font-size: 46upx;
    margin-right: 1px;
  }
  
  .nav-li text {
    position: absolute;
    right: 50upx;
    top: 80upx;
    font-size: 100upx;
    width: 108upx;
    height: 108upx;
    text-align: center;
    line-height: 60upx;
    opacity: 0.9;
  }
  
  .text-light {
    font-weight: 300;
  }
  
  @keyframes show {
    0% {
      transform: translateY(-50px);
    }
  
    60% {
      transform: translateY(40upx);
    }
  
    100% {
      transform: translateY(0px);
    }
  }
  
  @-webkit-keyframes show {
    0% {
      transform: translateY(-50px);
    }
  
    60% {
      transform: translateY(40upx);
    }
  
    100% {
      transform: translateY(0px);
    }
  }
  
  
  
  .bg-top-blue {
    background-image: linear-gradient(135deg, #52B5FC, #746BFE);
    color: #fff;
  }
  
  
  /* cat */
  .all-wrap {
    -webkit-animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    z-index: 999;
    position: absolute;
  }
  
/*  .all-wrap ::-webkit-scrollbar {
    display:none;
    width:0;
    height:0;
    color:transparent;
    overflow: hidden;
  } */
  
  .all {
    top: 20rem;
    /* left: 40%; */
    position: absolute;
    width: 5rem;
    height: 5rem;
    -webkit-transform-origin: center -20rem;
    transform-origin: center -20rem;
    -webkit-animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
/*    transform: scale(0.2, 0.2);
    -webkit-transform: scale(0.2, 0.2); */
  }
  
  .all:before {
    position: relative;
    content: '';
    display: block;
    height: 20rem;
    width: 2px;
    background-color: #DB242A;
    left: calc(50% - 1px);
    bottom: 20rem;
  }
  


  
  .yarn {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background-image: -webkit-radial-gradient(top left, circle, #e97c7f, #db242a 50%, #af1d22);
    background-image: radial-gradient(circle at top left, #e97c7f, #db242a 50%, #af1d22);
    z-index: 1;
  }
  
  .yarn:before,
  .yarn:after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    top: -1px;
  }
  
  .yarn:before {
    content: '';
    display: block;
    left: calc(50% + 7px);
    background-color: #b1bce6;
  }
  
  .yarn:after {
    content: '';
    display: block;
    right: calc(50% + 7px);
    background-color: #D5E8F8;
  }
  
  .cat-wrap {
    position: absolute;
    top: 0;
    left: calc(50% - 45px);
    width: 90px;
    height: 130px;
    -webkit-animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    -webkit-transform-origin: top center;
    transform-origin: top center;
  }
  
  .cat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: swing 7s 0.2s infinite both;
    animation: swing 7s 0.2s infinite both;
    -webkit-transform-origin: top center;
    transform-origin: top center;
  }
  
  .cat-upper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    z-index: 1;
  }
  
  .cat-upper .cat-leg {
    position: absolute;
    width: 20px;
    height: 100%;
    background-color: white;
    z-index: -1;
    background-image: -webkit-linear-gradient(left, #D5E8F8, #D5E8F8 20%, #8B9BD9);
    background-image: linear-gradient(to right, #D5E8F8, #D5E8F8 20%, #8B9BD9);
  }
  
  .cat-upper .cat-leg:nth-child(1) {
    border-top-left-radius: 100px;
    left: 10px;
  }
  
  .cat-upper .cat-leg:nth-child(1):after {
    content: '';
    display: block;
    left: 50%;
  }
  
  .cat-upper .cat-leg:nth-child(2) {
    border-top-left-radius: 0;
    border-top-right-radius: 100px;
    right: 10px;
  }
  
  .cat-upper .cat-leg:nth-child(2):after {
    content: '';
    display: block;
    right: 50%;
  }
  
  .cat-lower-wrap {
    height: 90%;
    width: 100%;
    position: absolute;
    top: 100%;
    width: 75px;
    left: calc(50% - 37.5px);
    -webkit-animation: reverse-swing 7s 0.2s infinite both;
    animation: reverse-swing 7s 0.2s infinite both;
    -webkit-transform-origin: top center;
    transform-origin: top center;
  }
  
  .cat-lower {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: swing 7s 0.5s infinite both;
    animation: swing 7s 0.5s infinite both;
    -webkit-transform-origin: top center;
    transform-origin: top center;
  }
  
  .cat-lower:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    background-image: -webkit-radial-gradient(10px 50px, circle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
    background-image: radial-gradient(circle at 10px 50px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
    z-index: 1;
  }
  
  .cat-lower .cat-leg,
  .cat-lower .cat-paw {
    z-index: -1;
    position: absolute;
    height: 20px;
    width: 20px;
    -webkit-animation: swing-leg 7s 0.3s infinite both;
    animation: swing-leg 7s 0.3s infinite both;
    z-index: 1;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-image: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9);
    background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9);
  }
  
  .cat-lower>.cat-leg {
    bottom: 20px;
  }
  
  .cat-lower>.cat-leg .cat-leg {
    top: 25%;
  }
  
  .cat-lower>.cat-leg+.cat-leg {
    right: 0;
  }
  
  .cat-lower .cat-paw {
    top: 50%;
    border-radius: 50%;
    background-color: #fff;
  }
  
  .cat-lower .cat-tail {
    position: absolute;
    height: 15px;
    width: 10px;
    -webkit-animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    z-index: 0;
    background-image: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9);
    background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  .cat-lower .cat-tail>.cat-tail {
    top: 50%;
  }
  
  .cat-lower>.cat-tail {
    left: calc(50% - 5px);
    top: 95%;
  }
  
  .cat-head {
    box-sizing: border-box;
    position: absolute;
    width: 90px;
    height: 90px;
    background-image: -webkit-radial-gradient(10px 10px, circle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
    background-image: radial-gradient(circle at 10px 10px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
    border-radius: 50%;
    top: calc(100% - 45px);
  }
  
  .cat-face {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 100px;
    perspective: 100px;
  }
  
  .cat-ears {
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    z-index: -1;
  }
  
  .cat-ear {
    width: 20px;
    height: 100%;
    position: absolute;
    border-radius: 5px;
    top: -10px;
  }
  
  .cat-ear:first-child {
    left: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: skewY(40deg);
    transform: skewY(40deg);
    background-color: white;
  }
  
  .cat-ear:first-child:before {
    content: '';
    display: block;
    left: 0;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    background-color: #D7EBFB;
  }
  
  .cat-ear:last-child {
    right: 0;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: skewY(-40deg);
    transform: skewY(-40deg);
    background-color: #d1e6f7;
  }
  
  .cat-ear:last-child:before {
    content: '';
    display: block;
    right: 0;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: #e0f0fc;
  }
  
  .cat-ear:before {
    content: '';
    display: block;
    width: 60%;
    height: 100%;
    top: 10px;
    position: absolute;
    background-color: #fff;
  }
  
  .cat-eyes {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 6px;
    -webkit-animation: blink 7s step-end infinite both;
    animation: blink 7s step-end infinite both;
  }
  
  .cat-eyes:before,
  .cat-eyes:after {
    content: '';
    display: block;
    position: absolute;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: #4B4D75;
  }
  
  .cat-eyes:before {
    content: '';
    display: block;
    left: 20px;
  }
  
  .cat-eyes:after {
    content: '';
    display: block;
    right: 20px;
  }
  
  .cat-mouth {
    position: absolute;
    width: 12px;
    height: 8px;
    background-color: #4B4D75;
    top: 60%;
    left: calc(50% - 6px);
    border-top-left-radius: 50% 30%;
    border-top-right-radius: 50% 30%;
    border-bottom-left-radius: 50% 70%;
    border-bottom-right-radius: 50% 70%;
    -webkit-transform: translateZ(10px);
    transform: translateZ(10px);
  }
  
  .cat-mouth:before,
  .cat-mouth:after {
    content: '';
    display: block;
    position: absolute;
    width: 90%;
    height: 100%;
    border: 2px solid #9FA2CB;
    top: 80%;
    border-radius: 100px;
    border-top-color: transparent;
    z-index: -1;
  }
  
  .cat-mouth:before {
    content: '';
    display: block;
    border-left-color: transparent;
    right: calc(50% - 1px);
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  
  .cat-mouth:after {
    content: '';
    display: block;
    border-right-color: transparent;
    left: calc(50% - 1px);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  
  .cat-whiskers {
    width: 50%;
    height: 8px;
    position: absolute;
    bottom: 25%;
    left: 25%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 60px;
    perspective: 60px;
  }
  
  .cat-whiskers:before,
  .cat-whiskers:after {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 30%;
    border: 2px solid #9FA2CB;
    border-left: none;
    border-right: none;
  }
  
  .cat-whiskers:before {
    content: '';
    display: block;
    right: 100%;
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotateY(70deg) rotateZ(-10deg);
    transform: rotateY(70deg) rotateZ(-10deg);
  }
  
  .cat-whiskers:after {
    content: '';
    display: block;
    left: 100%;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: rotateY(-70deg) rotateZ(10deg);
    transform: rotateY(-70deg) rotateZ(10deg);
  }
  
  @-webkit-keyframes bob {
    0% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    6.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    12.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    18.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    25% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    31.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    37.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    43.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    50% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    56.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    62.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    68.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    75% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    81.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    87.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    93.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    100% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  }
  
  @keyframes bob {
    0% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    6.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    12.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    18.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    25% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    31.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    37.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    43.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    50% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    56.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    62.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    68.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    75% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    81.25% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    87.5% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  
    93.75% {
      -webkit-transform: translateY(-0.4rem);
      transform: translateY(-0.4rem);
    }
  
    100% {
      -webkit-transform: translateY(0.4rem);
      transform: translateY(0.4rem);
    }
  }
  
  @-webkit-keyframes swing {
    0% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
    }
  
    12.5% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
  
    25% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }
  
    37.5% {
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }
  
    50% {
      -webkit-transform: rotate(23deg);
      transform: rotate(23deg);
    }
  
    62.5% {
      -webkit-transform: rotate(-23deg);
      transform: rotate(-23deg);
    }
  
    75% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }
  
    87.5% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
  
    100% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
    }
  }
  
  @keyframes swing {
    0% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
    }
  
    12.5% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
  
    25% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }
  
    37.5% {
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }
  
    50% {
      -webkit-transform: rotate(23deg);
      transform: rotate(23deg);
    }
  
    62.5% {
      -webkit-transform: rotate(-23deg);
      transform: rotate(-23deg);
    }
  
    75% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }
  
    87.5% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
  
    100% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
    }
  }
  
  @-webkit-keyframes swing-leg {
    0% {
      -webkit-transform: rotate(0.5deg);
      transform: rotate(0.5deg);
    }
  
    12.5% {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }
  
    25% {
      -webkit-transform: rotate(1deg);
      transform: rotate(1deg);
    }
  
    37.5% {
      -webkit-transform: rotate(-1.5deg);
      transform: rotate(-1.5deg);
    }
  
    50% {
      -webkit-transform: rotate(2.3deg);
      transform: rotate(2.3deg);
    }
  
    62.5% {
      -webkit-transform: rotate(-2.3deg);
      transform: rotate(-2.3deg);
    }
  
    75% {
      -webkit-transform: rotate(1.5deg);
      transform: rotate(1.5deg);
    }
  
    87.5% {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }
  
    100% {
      -webkit-transform: rotate(0.5deg);
      transform: rotate(0.5deg);
    }
  }
  
  @keyframes swing-leg {
    0% {
      -webkit-transform: rotate(0.5deg);
      transform: rotate(0.5deg);
    }
  
    12.5% {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }
  
    25% {
      -webkit-transform: rotate(1deg);
      transform: rotate(1deg);
    }
  
    37.5% {
      -webkit-transform: rotate(-1.5deg);
      transform: rotate(-1.5deg);
    }
  
    50% {
      -webkit-transform: rotate(2.3deg);
      transform: rotate(2.3deg);
    }
  
    62.5% {
      -webkit-transform: rotate(-2.3deg);
      transform: rotate(-2.3deg);
    }
  
    75% {
      -webkit-transform: rotate(1.5deg);
      transform: rotate(1.5deg);
    }
  
    87.5% {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }
  
    100% {
      -webkit-transform: rotate(0.5deg);
      transform: rotate(0.5deg);
    }
  }
  
  @-webkit-keyframes swing-tail {
    0% {
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
    }
  
    12.5% {
      -webkit-transform: rotate(4deg);
      transform: rotate(4deg);
    }
  
    25% {
      -webkit-transform: rotate(-4deg);
      transform: rotate(-4deg);
    }
  
    37.5% {
      -webkit-transform: rotate(6deg);
      transform: rotate(6deg);
    }
  
    50% {
      -webkit-transform: rotate(-9.2deg);
      transform: rotate(-9.2deg);
    }
  
    62.5% {
      -webkit-transform: rotate(9.2deg);
      transform: rotate(9.2deg);
    }
  
    75% {
      -webkit-transform: rotate(-6deg);
      transform: rotate(-6deg);
    }
  
    87.5% {
      -webkit-transform: rotate(4deg);
      transform: rotate(4deg);
    }
  
    100% {
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
    }
  }
  
  @keyframes swing-tail {
    0% {
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
    }
  
    12.5% {
      -webkit-transform: rotate(4deg);
      transform: rotate(4deg);
    }
  
    25% {
      -webkit-transform: rotate(-4deg);
      transform: rotate(-4deg);
    }
  
    37.5% {
      -webkit-transform: rotate(6deg);
      transform: rotate(6deg);
    }
  
    50% {
      -webkit-transform: rotate(-9.2deg);
      transform: rotate(-9.2deg);
    }
  
    62.5% {
      -webkit-transform: rotate(9.2deg);
      transform: rotate(9.2deg);
    }
  
    75% {
      -webkit-transform: rotate(-6deg);
      transform: rotate(-6deg);
    }
  
    87.5% {
      -webkit-transform: rotate(4deg);
      transform: rotate(4deg);
    }
  
    100% {
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
    }
  }
  
  @-webkit-keyframes reverse-swing {
    0% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }
  
    12.5% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }
  
    25% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
  
    37.5% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }
  
    50% {
      -webkit-transform: rotate(-23deg);
      transform: rotate(-23deg);
    }
  
    62.5% {
      -webkit-transform: rotate(23deg);
      transform: rotate(23deg);
    }
  
    75% {
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }
  
    87.5% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }
  
    100% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }
  }
  
  @keyframes reverse-swing {
    0% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }
  
    12.5% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }
  
    25% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
  
    37.5% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }
  
    50% {
      -webkit-transform: rotate(-23deg);
      transform: rotate(-23deg);
    }
  
    62.5% {
      -webkit-transform: rotate(23deg);
      transform: rotate(23deg);
    }
  
    75% {
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }
  
    87.5% {
      -webkit-transform: rotate(10deg);
      transform: rotate(10deg);
    }
  
    100% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }
  }
  
  @-webkit-keyframes face {
    0% {
      -webkit-transform: translateX(-2.5px);
      transform: translateX(-2.5px);
    }
  
    12.5% {
      -webkit-transform: translateX(5px);
      transform: translateX(5px);
    }
  
    25% {
      -webkit-transform: translateX(-5px);
      transform: translateX(-5px);
    }
  
    37.5% {
      -webkit-transform: translateX(7.5px);
      transform: translateX(7.5px);
    }
  
    50% {
      -webkit-transform: translateX(-11.5px);
      transform: translateX(-11.5px);
    }
  
    62.5% {
      -webkit-transform: translateX(11.5px);
      transform: translateX(11.5px);
    }
  
    75% {
      -webkit-transform: translateX(-7.5px);
      transform: translateX(-7.5px);
    }
  
    87.5% {
      -webkit-transform: translateX(5px);
      transform: translateX(5px);
    }
  
    100% {
      -webkit-transform: translateX(-2.5px);
      transform: translateX(-2.5px);
    }
  }
  
  @keyframes face {
    0% {
      -webkit-transform: translateX(-2.5px);
      transform: translateX(-2.5px);
    }
  
    12.5% {
      -webkit-transform: translateX(5px);
      transform: translateX(5px);
    }
  
    25% {
      -webkit-transform: translateX(-5px);
      transform: translateX(-5px);
    }
  
    37.5% {
      -webkit-transform: translateX(7.5px);
      transform: translateX(7.5px);
    }
  
    50% {
      -webkit-transform: translateX(-11.5px);
      transform: translateX(-11.5px);
    }
  
    62.5% {
      -webkit-transform: translateX(11.5px);
      transform: translateX(11.5px);
    }
  
    75% {
      -webkit-transform: translateX(-7.5px);
      transform: translateX(-7.5px);
    }
  
    87.5% {
      -webkit-transform: translateX(5px);
      transform: translateX(5px);
    }
  
    100% {
      -webkit-transform: translateX(-2.5px);
      transform: translateX(-2.5px);
    }
  }
  
  @-webkit-keyframes fade-in {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @keyframes fade-in {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes blink {
  
    from,
    to,
    10%,
    25%,
    80% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }
  
    8%,
    23%,
    78% {
      -webkit-transform: scaleY(0.1);
      transform: scaleY(0.1);
    }
  }
  
  @keyframes blink {
  
    from,
    to,
    10%,
    25%,
    80% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }
  
    8%,
    23%,
    78% {
      -webkit-transform: scaleY(0.1);
      transform: scaleY(0.1);
    }
  }
  
  /* body,
  html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #1F1F3C;
    overflow: hidden;
  } */
  
  
  
  
</style>
